<template>
  <div class="Service_Management">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <div class="top_box">
            <el-row style="margin:10px">
              <el-col :span="6" v-if="false">
                <span style="margin-right:10px">业务类型</span>
                <el-button size="mini" @click="Ytype(1)" :type="YYtype_a"
                  >字典</el-button
                >
                <el-button size="mini" @click="Ytype(2)" :type="YYtype_b"
                  >业务</el-button
                >
              </el-col>
              <el-col :span="6">
                <span style="margin-right:10px">服务类型</span>
                <el-button
                  size="mini"
                  @click="(serviceType = ''), Ftype(1)"
                  :type="FFtype_a"
                  >全部</el-button
                >
                <el-button
                  size="mini"
                  @click="(serviceType = 'project'), Ftype(2)"
                  :type="FFtype_b"
                  >集成项目</el-button
                >
                <el-button
                  size="mini"
                  @click="(serviceType = 'esbproject'), Ftype(3)"
                  :type="FFtype_c"
                  >接口项目</el-button
                >
              </el-col>
              <el-col :span="12">
                <el-input
                  style="width:50%;display:inline-block;margin-right:10px"
                  size="mini"
                  placeholder="请输入服务编码/名称查询"
                  v-model="val_d"
                ></el-input>
                <el-button size="mini" icon="el-icon-search" @click="getItem()"
                  >搜索</el-button
                >
                <el-button
                  size="mini"
                  icon="el-icon-plus"
                  @click="open"
                  v-if="false"
                  >新增服务</el-button
                >
              </el-col>
            </el-row>
            <el-row style="margin:10px">
              <el-col :span="24" v-if="false">
                <span style="margin-right:10px">业务模块</span>
                <el-button
                  size="mini"
                  @click="YMTT(0)"
                  :type="YWtype == 0 ? 'primary' : ''"
                >
                  全部
                </el-button>
                <el-button
                  :key="i"
                  v-for="(v, i) in ModuleItems_items"
                  size="mini"
                  @click="YMTT(i)"
                  :type="YWtype == i ? 'primary' : ''"
                  >{{ v }}</el-button
                >
              </el-col>
            </el-row>
          </div>
          <div
            class="main_box"
            style="margin:10px;overflow:auto"
            v-loading="isLoading"
          >
            <el-card
              class="box-card card_item"
              v-for="i in listItem"
              :key="i.id"
              style="width:11.6%;height:95px"
            >
              <el-row>
                <el-col :span="4">
                  <el-switch
                    v-if="i.status != 'PARTIALLY_STARTED'"
                    v-model="i.status == 'STARTED' ? true : false"
                    active-color="rgb(64,158,255)"
                    inactive-color="#ccc"
                    @change="swich_change(i, $event)"
                  >
                  </el-switch>
                  <i
                    v-if="i.status == 'PARTIALLY_STARTED'"
                    :style="
                      i.status == 'STARTED'
                        ? 'color:#409eff;font-size:32px;'
                        : i.status == 'STOPPED'
                        ? 'color:#ccc;font-size:32px'
                        : i.status == 'PARTIALLY_STARTED'
                        ? 'color:#cc9900;font-size:32px'
                        : ''
                    "
                    :class="
                      i.status == 'STARTED'
                        ? 'el-icon-open'
                        : i.status == 'STOPPED'
                        ? 'el-icon-turn-off'
                        : i.status == 'PARTIALLY_STARTED'
                        ? 'el-icon-set-up'
                        : ''
                    "
                  ></i>
                </el-col>
                <el-col :span="20" @click.native="edit(i)">
                  <div :title="i.name" class="card_item_name">{{ i.name }}</div>
                  <div :title="i.id" class="card_item_id">{{ i.id }}</div>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <!-- 弹层 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :span="4">
                    <h4>运行状态</h4>
                  </el-col>
                  <el-col :span="4">
                    <h4>模式</h4>
                  </el-col>
                  <el-col :span="6">
                    <h4>组件名称</h4>
                  </el-col>
                  <el-col :span="10">
                    <h4>描述</h4>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col
                :span="24"
                v-for="item in definitions_list"
                :key="item.id"
              >
                <el-row>
                  <el-col :span="4">
                    <el-switch
                      v-if="item.state == null"
                      v-model="item.state == null ? true : false"
                      active-color="##409eff"
                      inactive-color="#ccc"
                      disabled
                    >
                    </el-switch>
                    <el-switch
                      v-if="item.state != null"
                      v-model="item.state == 'STARTED' ? true : false"
                      active-color="##409eff"
                      inactive-color="#ccc"
                      @change="swich_change_child(item, $event)"
                      disabled
                    >
                    </el-switch>
                  </el-col>
                  <el-col :span="4">
                    <span>{{ item.mode }}</span>
                  </el-col>
                  <el-col :span="6">
                    {{ item.name }}
                  </el-col>
                  <el-col :span="10" :title="item.description">
                    <!-- <span class="stateInfo_style">{{item.description}}</span> -->
                    <el-button
                      v-if="item.description"
                      size="mini"
                      @click="item_infor(item.description)"
                      >详情</el-button
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">关 闭</el-button>
            </span>
          </el-dialog>
          <!-- 详情弹层 -->
          <el-dialog
            title="详情"
            :visible.sync="dialogVisible_infor"
            width="35%"
            :before-close="handleClose_infor"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <span>{{ item_info }}</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose_infor">取 消</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      definitions_list: [],
      description: [],
      page: {
        page: 1,
        limit: 999,
      },
      listItem: [],
      ModuleItems_items: {},
      title: "",
      YYtype_a: "",
      YYtype_b: "",
      FFtype_a: "primary",
      FFtype_b: "",
      FFtype_c: "",
      YWtype: "",
      val_a: 0,
      val_b: 0,
      val_c: 0,
      val_d: "",
      isLoading: false,
      serviceType: "", //服务类型
      dialogVisible_infor: false, //详情弹层
      item_info: "",
    };
  },
  methods: {
    open() {
      // this.formLabelAlign.Id ? this.title = '修改' : this.title = '新增'
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.definitions_list = [];
    },
    btn_yes() {
      let url = this.formLabelAlign.Id
        ? "/ServiceManage/Update"
        : "/ServiceManage/Create";
      let body = this.formLabelAlign;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.handleClose();
          this.getItem();
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      });
    },
    getItem() {
      this.isLoading = true
      this.page.page = 1;
      this.$post("/ServiceManage/Service/List?" + "?keyword=" + this.val_d + "&serviceType=" + this.serviceType).then(res => {
        if (res.code == 0) {
          this.listItem = res.data
          this.isLoading = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      })
    },
    getModuleItems_items() {
      this.$get("/ServiceManage/ModuleItems").then((res) => {
        if (res.code == 0) {
          this.ModuleItems_items = res.data;
        }
      });
    },
    edit(val) {
      console.log(val);
      this.definitions_list = val.definitions;
      this.description = val.description;
      this.open();
    },
    load() {
      this.page.page += 1;
      this.$post(
        "/ServiceManage/List?page=" +
          this.page.page +
          "&limit=" +
          this.page.limit +
          "&businessType=" +
          this.val_a +
          "&serviceType=" +
          this.val_b +
          "&businessModule=" +
          this.val_c +
          "&keyword=" +
          this.val_d
      ).then((res) => {
        if (res.code == 0 && res.data.list != null) {
          this.listItem.push(res.data.list);
        } else if (res.code == 0 && res.data.list == null) {
          // this.$message.warning('没有更多了');
        }
      });
    },
    Ytype(val) {
      this.page.page = 1;
      if (val == 1) {
        this.YYtype_b = "";
        this.YYtype_a == "primary"
          ? (this.YYtype_a = "")
          : (this.YYtype_a = "primary");
        this.YYtype_a == "primary" ? (this.val_a = 1) : (this.val_a = 0);
        this.getItem();
      }
      if (val == 2) {
        this.YYtype_b == "primary"
          ? (this.YYtype_b = "")
          : (this.YYtype_b = "primary");
        this.YYtype_a = "";
        this.YYtype_b == "primary" ? (this.val_a = 2) : (this.val_a = 0);
        this.getItem();
      }
    },
    Ftype(val) {
      this.page.page = 1;
      if (val == 1) {
        this.FFtype_b = "";
        this.FFtype_c = "";
        this.FFtype_a = "primary";
        this.getItem();
      }
      if (val == 2) {
        this.FFtype_b = "primary";
        this.FFtype_a = "";
        this.FFtype_c = "";
        this.getItem();
      }
      if (val == 3) {
        this.FFtype_c = "primary";
        this.FFtype_a = "";
        this.FFtype_b = "";
        this.getItem();
      }
    },
    YMTT(val) {
      this.page.page = 1;
      this.YWtype = val;
      this.val_c = val;
      this.getItem();
    },
    swich_change(val, i) {
      this.isLoading = true;
      console.log(val, i);
      let status = i ? 1 : 0;
      this.$post(
        "/ServiceManage/Service/Status?id=" +
          val.id +
          "&status=" +
          status +
          "&type=" +
          val.type
      ).then((res) => {
        if (res.code == 0) {
          this.getItem();
          this.isLoading = false;
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
          this.isLoading = false;
        }
      });
    },
    swich_change_child(val, i) {
      console.log(val, i);
      let status = i ? 1 : 0;
      this.$post(
        "/ServiceManage/SubService/Status?id=" +
          val.id +
          "&status=" +
          status +
          "&type=" +
          val.type
      ).then((res) => {
        if (res.code == 0) {
          this.getItem();
          // this.$post("/ServiceManage/Service/List?" + "?keyword=" + this.val_d).then(res => {
          //   if (res.code == 0) {
          //     let arr = res.data
          //     var that = this
          //     for (var i in arr) {
          //       for (var j in arr[i].definitions) {
          //         if (arr[i].definitions[j].id == val.id) {
          //           this.definitions_list = []
          //           this.definitions_list = arr[i].definitions[j]
          //         }
          //       }
          //     }
          //   }
          // })
          // this.$message({
          //   message: '操作成功',
          //   type: 'success'
          // });
          // this.getItem()
        }
      });
    },
    item_infor(val) {
      this.item_info = val;
      this.dialogVisible_infor = true;
    },
    handleClose_infor() {
      this.dialogVisible_infor = false;
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getItem();
    this.getModuleItems_items();
  },
};
</script>
<style lang="scss" scoped>
.Service_Management {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .card_item {
    display: inline-block;
    margin: 5px;
  }
  .main_box {
    text-align: none;
    height: 700px;
  }
  .card_item_name {
    padding: 0 10px 0 20px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card_item_id {
    padding: 0 10px 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stateInfo_style {
    // width: 100%;
    // height: 30px;
    overflow: hidden;
    // text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
